<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../js/wu_qi/bootstrap/css/bootstrap.min.css">
  <script src="../../js/wu_qi/bootstrap/js/jq.mini.js"></script>
  <script src="../../js/wu_qi/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/wu_qi/reset.css">
  <script src="../../js/wu_qi/Flow.js"></script>
  <style>
    .header {
      padding: 20px 50px;
      height: 100%;
      font-size: 16px;
    }

    .header .header_title {
      font-size: 20px;
      height: 30px;
      line-height: 30px;
    }

    .header_list {
      border-top: 1px solid #1561;
      display: flex;
      padding-top: 10px;


    }

    .header_img {
      width: 60px;
      height: 60px;
      background-color: rgba(25, 158, 216, 1);
      border-radius: 50%;
      margin-right: 20px;
    }

    .header img {
      margin: 0px auto;
      margin-top: 15px;
    }

    .list {
      text-align: center;
      height: 112px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #1561;
      flex: 1;
      margin-right: 50px;
      width: 225px;
    }

    .list_right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

    }

    .occupy {
      border: 1px solid rgba(17, 85, 102, 0);
    }

    .center {
      margin: 50px 0px;
      padding: 25px 0px;
      background-color: rgb(247, 247, 247);

    }

    .center .mb-3 {
      margin-bottom: 0rem !important;
    }

    .center .header_input {
      width: 280px;
      height: 30px;
      padding: 0px 10px;
      margin: 0px 10px;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 4px;
      box-sizing: border-box;
      color: rgb(78, 78, 78);
    }

    .header_input_title {
      padding: 0px 5px;
      text-align: center;
      line-height: 30px;
    }

    .center_list_ul {
      display: flex;
      flex-direction: row;
      color: #666666;
    }

    .header .center_list_ul li {
      flex: 1;
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
      border: 1px solid rgba(217, 217, 217, 1);
      background-color: rgba(244, 244, 244, 1);
    }

    .nav-link {
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
      border: 1px solid rgba(217, 217, 217, 1);
      background-color: rgba(244, 244, 244, 1);
      color: #666666;
    }




    .nav-tabs {
      border-bottom: 0px;
    }

    .nav-tabs li {
      border-bottom: 0px;
      border: 1px solid #666666;
    }

    .btn_right {
      height: 30px;
      display: flex;
      justify-content: flex-end;
    }

    .btn-primary {
      background-color: rgba(25, 158, 216, 1);

    }

    .center_list_ul {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      color: #666666;
    }

    .header .center_list_ul li {
      flex: 1;
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
      border: 1px solid rgba(217, 217, 217, 1);
      background-color: rgba(244, 244, 244, 1);
    }

    .headerPage ul {
      display: flex;
    }

    .headerPage ul li {
      flex: 1;
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
    }

    .page {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: rgb(255, 255, 255);
      margin: 3px 5px;
      cursor: pointer;
      border-radius: 10%;
    }

    .fooler_Active {
      background-color: rgba(25, 158, 216, 1);
      color: aliceblue;
    }

    .fooler {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .Mt_list {
      padding: 20px;
    }

    .Mt_list_select {
      width: 40%;

    }
  </style>
</head>
<div class="container-fluid header">
  <div class="header_title">
    资金流水
  </div>
  <div class="row header_list  w-100">

    <div class="col list">
      <div class="header_img">
        <img src="../../img/wu_qi/caiwu.png" alt="">
      </div>
      <div class="list_right">
        <p>累计佣金提现</p>
        <h2 class="">124,345</h2>
      </div>
    </div>
    <div class="col list">
      <div class="header_img">
        <img src="../../img/wu_qi/caiwu.png" alt="">
      </div>
      <div class="list_right">
        <p>今日提现</p>
        <h2>124,345</h2>
      </div>
    </div>
    <div class="col list">
      <div class="header_img">
        <img src="../../img/wu_qi/caiwu.png" alt="">
      </div>
      <div class="list_right">
        <p>待处理提现</p>
        <h2>124,345</h2>
      </div>
    </div>
    <div class="col list occupy">

    </div>
  </div>
  <!-- 输入框 -->
  <div class="center">
    <div class="row">
      <div class="col-lg-4">
        <div class="input-group input-group-sm mb-3">
          <div class="header_input_title ">手机号码</div>

          <div>
            <input type="text" class="form-control header_input phone" placeholder="请输入手机号码">
          </div>
        </div>
      </div>
      <div class="col-lg-4 ">
        <div class="input-group input-group-sm mb-3">
          <div class="header_input_title">处理状态</div>
          <!-- Single button -->
          <div>
            <div class="form-group">
              <select id="grade" class="form-control header_input Processing">
                <option value="0">选择处理状态</option>
                <option value="已完成">已完成</option>
                <option value="待审核">待审核</option>
                <option value="已拒绝">已拒绝</option>
              </select>
            </div>
          </div>

        </div>
      </div>
      <div class="col-lg-4 ">
        <div class="btn-group header_btn" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary search">搜索</button>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="row">
      <div class="col col-lg-8">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item one" role="presentation">
            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
              role="tab" aria-controls="home" aria-selected="true">全部</button>
          </li>
          <li class="nav-item two" role="presentation">
            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button"
              role="tab" aria-controls="profile" aria-selected="false">无需审核</button>
          </li>
          <li class="nav-item three" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
              role="tab" aria-controls="contact" aria-selected="false">待审核</button>
          </li>
          <li class="nav-item two" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
              role="tab" aria-controls="contact" aria-selected="false">审核通过</button>
          </li>
          <li class="nav-item fifth" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
              role="tab" aria-controls="contact" aria-selected="false">审核拒绝</button>
          </li>
        </ul>
      </div>
      <div class="col col-lg-3 btn_right">
        <div class="btn-group " role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary search">提现规则设置</button>
        </div>
      </div>

    </div>
    <div>
      <div class="tab-content" id="myTabContent">
        <!-- 1 -->
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <ul class="list-group center_list_ul">
            <li class="list-group-item">财务编号</li>
            <li class="list-group-item">手机号码</li>
            <li class="list-group-item">会员等级</li>
            <li class="list-group-item">提现方式</li>
            <li class="list-group-item">金额</li>
            <li class="list-group-item">处理时间</li>
            <li class="list-group-item">处理状态</li>


          </ul>
          <div class="headerPage ">
          </div>
          <div class="fooler">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <div class="clear pageDiv">
                  <span class="page fooler_Active">1</span>
                  <span class="page">1</span>
                </div>
              </ul>
            </nav>
          </div>
        </div>
        <!-- 2 -->
        <div class="tab-pane fade listTow" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          <ul class="list-group center_list_ul">
            <li class="list-group-item">财务编号</li>
            <li class="list-group-item">手机号码</li>
            <li class="list-group-item">会员等级</li>
            <li class="list-group-item">提现方式</li>
            <li class="list-group-item">金额</li>
            <li class="list-group-item">处理时间</li>
            <li class="list-group-item">处理状态</li>


          </ul>
          <div class="headerPage ">
          </div>
          <div class="fooler">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <div class="clear pageDiv">
                  <span class="page fooler_Active">1</span>
                  <span class="page">1</span>
                </div>
              </ul>
            </nav>
          </div>
        </div>
        <!-- 3 -->
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">

          <ul class="list-group center_list_ul">
            <li class="list-group-item">财务编号</li>
            <li class="list-group-item">手机号码</li>
            <li class="list-group-item">会员等级</li>
            <li class="list-group-item">提现方式</li>
            <li class="list-group-item">金额</li>
            <li class="list-group-item">处理时间</li>
            <li class="list-group-item">处理状态</li>


          </ul>
          <div class="headerPage ">
          </div>
          <div class="fooler">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <div class="clear pageDiv">
                  <span class="page fooler_Active">1</span>
                  <span class="page">1</span>
                </div>
              </ul>
            </nav>
          </div>
        </div>
        <!-- 4 -->
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
          <ul class="list-group center_list_ul">
            <li class="list-group-item">财务编号</li>
            <li class="list-group-item">手机号码</li>
            <li class="list-group-item">会员等级</li>
            <li class="list-group-item">提现方式</li>
            <li class="list-group-item">金额</li>
            <li class="list-group-item">处理时间</li>
            <li class="list-group-item">处理状态</li>


          </ul>
          <div class="headerPage ">
          </div>
          <div class="fooler">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <div class="clear pageDiv">
                  <span class="page fooler_Active">1</span>
                  <span class="page">1</span>
                </div>
              </ul>
            </nav>
          </div>
        </div>
        <!-- 5 -->
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
          <ul class="list-group center_list_ul">
            <li class="list-group-item">财务编号</li>
            <li class="list-group-item">手机号码</li>
            <li class="list-group-item">会员等级</li>
            <li class="list-group-item">提现方式</li>
            <li class="list-group-item">金额</li>
            <li class="list-group-item">处理时间</li>
            <li class="list-group-item">处理状态</li>
          </ul>
          <div class="headerPage ">
          </div>
          <div class="fooler">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <div class="clear pageDiv">
                  <span class="page fooler_Active">1</span>
                  <span class="page">1</span>
                </div>
              </ul>
            </nav>
          </div>
        </div>

      </div>
      <script>
        //全局声明
        let searchArr = []
        let toPage = []
        let maxPage
        let to = 1
        let delId
        search()
        //状态更换
        $(".two").click(function () {
          console.log("111");
          $(".Processing option:first-child").prop('selected', 'selected')
          $(".header_input").find("option:contains('已完成')").attr("selected", true);
          search()
          console.log(searchArr);
        })
        $(".three").click(function () {
          $(".Processing option:first-child").prop('selected', 'selected')

          console.log("111");
          $(".header_input").find("option:contains('待审核')").attr("selected", true);
          search()
          console.log(searchArr);
        })

        $(".fifth").click(function () {
          $(".Processing option:first-child").prop('selected', 'selected')
          console.log("111");
          $(".header_input").find("option:contains('已拒绝')").attr("selected", true);
          search()
          console.log(searchArr);
        })
        //渲染数据
        function show(data) {
          $(".headerPage").html("")
          for (let i = 0; i < data.length; i++) {
            $(".headerPage").append(`
                 <ul>
                            <li class="list-group-item">${data[i].number}</li>
                            <li class="list-group-item">${data[i].cellPhone}</li>
                            <li class="list-group-item">${data[i].level}</li>
                            <li class="list-group-item">${data[i].Method}</li>
                            <li class="list-group-item">${data[i].Amount}</li>
                            <li class="list-group-item">${data[i].Time}</li>
                            <li class="list-group-item">${data[i].Processing}</li>
                          
                             
                    </ul>
                `)

          }
        }

        function showData(data, pageNum) {
          let toS = (pageNum - 1) * 7
          toPage = data.slice(toS, toS + 7)
          show(toPage)
          $(".page").eq(pageNum - 1).addClass("fooler_Active").siblings().removeClass("fooler_Active")
          to = pageNum
        }

        function showPage(data) {
          maxPage = Math.ceil(data.length / 7)
          $(".pageDiv").html("")
          for (let i = 1; i <= maxPage; i++) {
            $('.pageDiv').append(`<span class="page">${i}</span>`)
          }
        }
        $('.pageDiv').on('click', '.page', function () {
          showData(searchArr, parseInt($(this).text()))
        })
        $(".search").click(function () {
          search()
        })

        function search() {
          let phone = $(".phone").val()
          let Processing = $(".Processing option:selected").val()
          console.log(phone, Processing);
          searchArr = [...flow]
          if (phone != "") {
            for (let i = 0; i < searchArr.length; i++) {
              if (searchArr[i].cellPhone != phone) {
                searchArr.splice(i, 1)
                i--
              }

            }
          }
          if (Processing != 0) {
            for (let i = 0; i < searchArr.length; i++) {
              if (searchArr[i].Processing != Processing) {
                searchArr.splice(i, 1)
                i--
              }
            }
          }
          console.log(searchArr);
          showPage(searchArr)
          showData(searchArr, 1)
        }
      </script>

      <body>

      </body>

</html>